import React, { useState } from 'react';
import "../../styles/addStock.less"
import type { UploadChangeParam } from 'antd/es/upload';
import { LoadingOutlined, PlusOutlined } from '@ant-design/icons';
import type { RcFile, UploadFile, UploadProps } from 'antd/es/upload/interface';
import { history } from 'umi';
import {
  Cascader,
  Form,
  InputNumber,
  Radio,
  Input,
  Button,
  message, Upload,
} from 'antd';
type SizeType = Parameters<typeof Form>[0]['size'];
type Props = {}
//图片上传
const getBase64 = (img: RcFile, callback: (url: string) => void) => {
  const reader = new FileReader();
  reader.addEventListener('load', () => callback(reader.result as string));
  reader.readAsDataURL(img);
};

const beforeUpload = (file: RcFile) => {
  const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  if (!isJpgOrPng) {
    message.error('You can only upload JPG/PNG file!');
  }
  const isLt2M = file.size / 1024 / 1024 < 2;
  if (!isLt2M) {
    message.error('Image must smaller than 2MB!');
  }
  return isJpgOrPng && isLt2M;
};
//数字文本框
const onChange = (value: number | null) => {
  console.log('changed', value);
};
const AddStock = (props: Props) => {
  const [componentSize, setComponentSize] = useState<SizeType | 'default'>('default');

  const onFormLayoutChange = ({ size }: { size: SizeType }) => {
    setComponentSize(size);
  };
  //上传
  const [loading, setLoading] = useState(false);
  const [imageUrl, setImageUrl] = useState<string>();

  const handleChange: UploadProps['onChange'] = (info: UploadChangeParam<UploadFile>) => {
    if (info.file.status === 'uploading') {
      setLoading(true);
      return;
    }
    if (info.file.status === 'done') {
      // Get this url from response in real world.
      getBase64(info.file.originFileObj as RcFile, url => {
        setLoading(false);
        setImageUrl(url);
      });
    }
  };

  const uploadButton = (
    <div>
      {loading ? <LoadingOutlined /> : <PlusOutlined />}
      <div style={{ marginTop: 8 }}>Upload</div>
    </div>
  );

  const gotoBack = () => {
    history.push('/home/addInform');
  }

const gotoNext = () => {
  history.push('/home/addText');
}
return (
  <div>
    <Form
      labelCol={{ span: 4 }}
      wrapperCol={{ span: 14 }}
      layout="horizontal"
      initialValues={{ size: componentSize }}
      onValuesChange={onFormLayoutChange}
      size={componentSize as SizeType}
    >
      <Form.Item label="商品规格">
        <Radio.Group>
          <Radio value="apple"> 单规格 </Radio>
          <Radio value="pear"> 多规格 </Radio>
        </Radio.Group>
      </Form.Item>
      <Form.Item label="图片">
        <Upload
          name="avatar"
          listType="picture-card"
          className="avatar-uploader"
          showUploadList={false}
          action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
          beforeUpload={beforeUpload}
          onChange={handleChange}
        >
          {imageUrl ? <img src={imageUrl} alt="avatar" style={{ width: '100%' }} /> : uploadButton}
        </Upload>
      </Form.Item>
      <Form.Item label="售价">
        <InputNumber min={0} max={100} defaultValue={0} onChange={onChange} className='InputNumber' />
      </Form.Item>
      <Form.Item label="成本价">
        <InputNumber min={0} max={100} defaultValue={0} onChange={onChange} className='InputNumber' />
      </Form.Item>
      <Form.Item label="原价">
        <InputNumber min={0} max={100} defaultValue={0} onChange={onChange} className='InputNumber' />
      </Form.Item>
      <Form.Item label="库存">
        <InputNumber min={0} max={100} defaultValue={0} onChange={onChange} className='InputNumber' />
      </Form.Item>
      <Form.Item label="商品编号">
        <Input placeholder="" className='InputNumber' />
      </Form.Item>
      <Form.Item label="重量">
        <InputNumber min={0} max={100} defaultValue={0} onChange={onChange} className='InputNumber' />
      </Form.Item>
      <Form.Item className='but'>
        <Button type="primary" className='button' htmlType="submit" onClick={() => gotoBack()}>上一步</Button>
        {/* <Button type="primary" htmlType="submit" onClick={() => gotoNext()}>下一步</Button> */}
      </Form.Item>
      <Form.Item className='but'>
        <Button type="primary" className='butt' htmlType="submit" onClick={() => gotoNext()}>下一步</Button>
      </Form.Item>
    </Form>
  </div>
)
}




export default AddStock